<template>
  <div>
    <multi-select :allTags="allTags" v-model="checked" @onChange="onChange"  class="testPage"></multi-select>
  </div>
</template>
<script>
import MultiSelect from './MultiSelect'
export default {
     components: {
    'multi-select': MultiSelect
  },
  data() {
    return {
      checked: [6,9],
      allTags: [
        { text: '不朽者', value: '1' },
        { text: '步兵', value: '2' },
        { text: '建筑', value: '3' },
        { text: '装甲', value: '4' },
        { text: '野兽', value: '5' },
        { text: '异虫', value: '6' },
        { text: '灵能者', value: '7' },
        { text: '龙', value: '8' },
        { text: '傀儡', value: '9' },
        { text: '不朽', value: '10' },
        { text: '建筑', value: '11' },
        { text: '步兵', value: '12' },
        { text: '野兽', value: '13' },
        { text: '龙', value: '14' },
        { text: '傀儡', value: '15' },
      ],
    }
  },
  methods:{
    onChange(value){
        console.log(value)
    }
  }
}
</script>
<style scoped>
.testPage{
  display: grid;
  grid-template: repeat(4,60px)/repeat(4,100px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
</style>